<template>
  <a-spin :spinning="loading">
    <e-container class="log-record">
      <e-title title="Log Record" />
      <div v-permission="'LogRecord:Query'" style="margin-top: 30px">
        <a-table
          :columns="columns"
          :data-source="data"
          class="ant-table-striped"
          :pagination="false"
          :row-class-name="(_record, index) => (index % 2 === 0 ? 'table-striped' : null)">
          <template #emptyText>
            <e-empty>
              <template #description>
                <div>No Data</div>
              </template>
            </e-empty>
          </template>
        </a-table>
      </div>
    </e-container>
  </a-spin>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import logRecord from '@/api/client/logRecord.js'
import EContainer from '@/components/EContainer.vue'
import EEmpty from '@/components/EEmpty.vue'
import ETitle from '@/components/ETitle.vue'
import pageColumns from '@/assets/script/page_columns.js'

const route = useRoute()
const columns = reactive(pageColumns.logRecord)
const data = ref([])
const { id } = route.params
const loading = ref(false)

const getLogRecord = () => {
  loading.value = true
  logRecord
    .getLogRecord({
      clientOrgID: id
    })
    .then(res => {
      if (res.code === 2000) {
        data.value = res.data
      }
    })
    .finally(() => {
      setTimeout(() => {
        loading.value = false
      }, 30)
    })
}
onMounted(() => {
  getLogRecord()
})
</script>

<style scoped lang="less">
@import '@/assets/style/reset_table';
</style>
<route lang="yaml">
name: Log Record
path: '/client/:id/log-record'
meta:
  sort: 140
  title: Log Record
  icon: LogRecord
  permission: LogRecord
</route>
